<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			button{
				position: absolute;
				top: 0;
				width: 100px;
				height: 50px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<button>安键1</button>
		<button>安键2</button>
		<button>安键3</button>
		<button>安键4</button>
		<button>安键5</button>
		<script type="text/javascript">
			var btns = document.querySelectorAll("button");
			for (var i=0;i<btns.length;i++) {
				btns[i].style.left=i*100+"px";
			}
		for (var i=0;i<btns.length;i++) {
			btns[i].index=i;
			btns[i].onmousedown = function(ev){
				var evObj = ev || window.event;
				var disx = ev.clientX-this.offsetLeft;
				var disy = ev.clientY-this.offsetTop;
				var startx = ev.clientX;
				btns[this.index].onmousemove = function(ev){
					var e = ev || window.event;
					//计算滑块的偏移量
					var x =e.clientX-disx;
					var y = e.clientY-disy;
					
					btns[this.index].style.left = x+"px";
					btns[this.index].style.top = y+"px";
				}
				btns[this.index].onmouseup = function(ev){
					var endx = ev.clientX;
					var endy = ev.clientY;
					var end = parseInt(endx/100);
					var chax = ev.clientX-startx;
					btns[this.index].onmousemove="";
					btns[this.index].style.top=0+"px";
					btns[this.index].style.left=(end)*100+"px";
				}
				return false;
			}
		}
		</script>
	</body>
</html>
